<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notepad</title>

  <!-- bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- animate.css -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- mescroll -->
  <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

  <!-- mui -->
  <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less" />

  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 页面独立的 -->
  <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
  <!-- 搜索 -->
  <div class="search">
    <div class="box">
      <div class="icon">
        <span class="glyphicon glyphicon-search"></span>
      </div>

      <input class="input" placeholder="请输入名字" />

      <button class="btn" size="mini" type="default">搜索</button>
    </div>
  </div>

  <!-- 分类 -->
  <div class="type wow fadeInUp mescroll-touch">
    <div class="list">
    </div>
  </div>

  <!-- 列表 -->
  <div id="contact" class="contact wow fadeInUp meScroll" data-wow-delay="100ms">
    <div class="list">
    </div>
  </div>

  <!-- 底部 -->
  <div class="tabbar">
    <div class="box">
      <a href="index.html" class="item">
        <span class="icon glyphicon glyphicon-home"></span>
        <span class="name">首页</span>
      </a>
      <a href="ContactAdd.html" class="item">
        <span class="icon glyphicon glyphicon-list-alt"></span>
        <span class="name">新建</span>
      </a>
      <a href="user.html" class="item">
        <span class="icon glyphicon glyphicon-user"></span>
        <span class="name">我的</span>
      </a>
    </div>
  </div>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mescroll -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入接口插件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookie.js"></script>
<!-- 引入校验用户插件 -->
<script src="./assets/plugins/helpers.js"></script>


<script>
  //实例化wow.js
  new WOW().init();

  // 拿cookie
  let business = cookie.get("business")
  let typeid = 0;
  let search = "";

  try {
    business = JSON.parse(business)
  }
  catch {
    console.log(error);
    business = {};
  }


  let meScroll = new MeScroll("contact", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
    down: {
      auto: false,
      isBounce: true,
      callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
    },
    up: {
      auto: true,
      isBounce: true,
      callback: upCallback,
      toTop: {
        //回到顶部按钮
        duration: 600,
        src: "./assets/plugins/mescroll/a1ac5449856aa3281f069562d729b2be.png", //图片路径,默认null,支持网络图
        offset: 100, //列表滚动1000px才显示回到顶部按钮	
        supportTap: true,
      },
    }
  });

  // 下拉刷新
  async function downCallback() {
    // 当前页重置为1，自动调用上拉加载回调函数
    meScroll.resetUpScroll();

    $("#contact .list").empty();

    mui.toast("刷新成功")
  }

  // 上拉加载
  async function upCallback(page) {
    let params = {
      page: page.num,
      limit: page.size,
      typeid,
      search,
      businessid: business.id,
    }

    let result = await POST(
      {
        url: '/card/card/index',
        params,
      }
    )

    // 判断请求结果
    if (result.code === 1) {
      console.log("加载成功");

      let count = result.data ? result.data.count : 0;
      let list = result.data ? result.data.list : [];
      console.log(count);
      console.log(list);

      meScroll.endBySize(list.length, count);

      // 渲染数据到页面上的方法
      FetchList(list)

      mui.toast("加载成功")
    }
    else {
      console.log("加载失败");

      meScroll.endBySize(0, 0);

      mui.toast(result.msg);

      return false;
    }
  };



  // 分类事件
  $(".type .list").on("click", ".item", function () {
    typeid = $(this).data("typeid");

    console.log($(this).data("typeid"));

    $(this).addClass("active").siblings().removeClass("active");

    downCallback();
  });

  //关键字
  $("button[type='default']").click(function () {
    search = $.trim($(".input").val())

    downCallback();
  });

  // 拿到顶部水平滑动栏的数据名
  // 请求获取分类接口的数据
  (async () => {

    let result = await POST({
      url: '/card/card/type'
    })

    //默认有的数据，无论请求成功或失败，为什么需要这个数组？因为这一条数据是页面一进来就自带的
    let data = [];

    data.unshift({
      id: 0,
      name: "全部",
    })

    //把每条数据添加进data数组里
    if (result.code == 1) {

      console.log(result.data)

      data.push(...result.data);

      console.log(data)

      for (let item of data) {
        $(".type .list").append(`<div data-typeid="${item.id}" class="item ${item.id == 0 ? 'active' : ''}">${item.name}</div>`)
      }
    }
    else {
    }
  })()
  // 渲染条目到页面的方法
  function FetchList(list = []) {

    if (list.length > 0) {

      let temp = "";

      for (let item of list) {

        temp = `
            <div class="item">
                <div class="content">
                    <h3 class="title">
                        <a href="ContactAdd.html">${item.nickname}</a>
                    </h3>

                    <div class="info">
                        <div class="icon">
                            <image src="./assets/images/info.png"></image>
                        </div>
                        <div class="desc">
                            ${item.reamark}
                        </div>
                    </div>
                </div>

                <div class="call icon">
                    <a href="tel:${item.mobile}">
                        <image src="./assets/images/call.png"></image>
                    </a>
                </div>
                <button type="button" data-id="${item.id}" class="mui-btn mui-btn-success">编辑</button>
                <button type="button" data-id="${item.id}" data-nickname="${item.nickname}" class="mui-btn mui-btn-danger">删除</button>
          </div>
        `;

        $("#contact .list").append(temp);
      }
    }


  }

  // 删除按钮
  $("#contact .list").on("click", ".mui-btn-danger", function () {
    let that = $(this);
    let id = that.data("id");
    let nickname = that.data("nickname");

    mui.confirm(`是否确认删除${id}${nickname}联系人?`, "删除联系人", ["确认", "取消"], async function (res) {
      if (res.index == 0) {
        let params = {
          businessid: business.id,
          cardid: id,
        }

        let result = await POST({
          url: "/card/card/del",
          params,
        })

        if (result.code == 1) {
          // 方法一:通过点击删除按钮获取当前点击按钮的item的索引位置，从这个class是item的元素集合中删除掉从index开始的一个元素，即他自己。
          // let index = that.parents(".item").index();
          // $("#contact .list .item").splice(index, 1);
          // 这个方法不行，还是需要刷新。

          // 方法二:直接删除自己，不用刷新
          let index = that.parents(".item").remove();

          mui.toast(result.msg);

          // 方法三:直接刷新 因为后台数据已经删了，重新渲染就不会渲染出来，所以可直接刷新页面，但是如果数据量大的话，会比较费时间。
          // downCallback();

          return false;
        }
        else {
          mui.toast(result.msg);
          return false;
        }
      }

    });
  })

  //编辑按钮
  $("#contact .list").on("click", ".mui-btn-success", function () {
    location.href = `./ContactEdit.html?cardid=${$(this).data("id")}`
  })
</script>